<template>
	<view class="goods-car">
		<view class="shopcart-main-container">
			<view class="shopcart-title">
				<view class="shopcart-title-text">购物车</view>
			</view>
			<checkbox-group bindchange="handleShopChange">
				<view class="shop-item" v-for="(item,index) in goodsList" :key="index" :data-id="item.goodsId">
					<label class="shopcart-label" :class="[item.isTouchMove?'touch-move-active' : '' ]" style="display:flex;border:1rpx solid #ffffff;" :data-id="item.goodsId">
						<checkbox :value="item.goodsId" :checked="item.checked" class="checkbox" />
						<view style="display:flex" class="content-box" :data-index="index" @touchstart="touchStart" @touchmove="touchMove">
							<view class="good-icon-box">
								<image :src="item.goodsLogo" class="good-icon" mode=""></image>
							</view>
							<view class="content">
								<view class="good-info">
									<text class="name">{{item.brandName}}</text>
									<!-- <text class="describe">{{ item.goodsName }}</text> -->
								</view>
								<view class="vip-price-text-icon">VIP价</view>
								<view class="diff-market-price-tips">比市场价便宜89元</view>
								<view class="good-price">
									<view class="good-price-vip">
										<view class="">￥</view>
										<view class="">99</view>
									</view>
									<view class="good-price-market">
										<view class="">市场价</view>
										<view class="">￥</view>
										<view class="">1789</view>
									</view>	
								</view>
								
								<view class="good-price-num">
									<!-- <text class="good-price-num-text">
										<text style="font-size: 20rpx;margin-right: 2rpx;">￥</text>
										<text>{{filter.regFenToYuan(item.goods_price)}}</text>
									</text> -->
									<view class="amount">
										<view :style="[{color:item.number===1?'#999999':'#999999'}]" style="font-size:24rpx" data-type="decrease" :data-id="index" :data-carid="item.cartId" :data-goodid="item.goodsId" @click.stop="handleCountChange">－</view>
										<view style="width:60rpx;margin:0 15rpx;font-size: 26rpx;font-weight: 400;border: none;">
											{{item.number}}
										</view>
										<view :style="[{ color:item.number>=10?'#999999':'#999999'}]" data-type="add" :data-id="index" :data-carid="item.cartId" :data-goodid="item.goodsId" @click.stop="handleCountChange">＋</view>
									</view>
								</view>
							</view>
						</view>
						<view class="del" @click="del" :data-index="index" :data-carid="item.cartId">删除</view>
					</label>
					<view class="sell_out" :class="[item.isTouchMove ? 'touch-move-active-pop' : '' ]"  :data-index="index" @touchstart="touchStart" @touchmove="touchMove" v-if="item.number==0">
						<text class="sell_out_text">售罄</text>
					</view>
				</view>
			</checkbox-group>

			<!-- <view class="emptycart_box" wx:if="{{ isempty }}" catchtap="backhome">
				<image src="/images/emptycart.png" class="emptycart"></image>
				<view class="cartext">空空如也~去逛逛</view>
			</view> -->

			<!-- <view class="bottom-container">
				<view class="bottom-wrapper">
					<view class="inner">
						<checkbox-group bindchange="onSelectAll">
							<label class="checkall">
								<checkbox value="all" checked="{{isAllChecked}}"></checkbox>
								<text>全选</text>
							</label>
						</checkbox-group>
					</view>
				</view>
				<view class="goPay" catchtap="goPay">
					<text style="font-size: 28rpx;color: #FFFFFF;font-weight: 400;margin-right: 10rpx;">总计</text>
					<text style="font-size:24rpx;color: #FFFFFF;font-weight: 400;margin-right: 5rpx;">￥</text>
					<text style="font-size: 36rpx;color: #FFFFFF;font-weight: 400;margin-right: 10rpx;">{{ filter.regFenToYuan(totalPrice)}}</text>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data: () => ({
			goodsList:[
				{
					"cartId":859,
					"brandId":237,
					"brandName":"这里文案只显示两行超出省略表示,这里文案只显示两行超出省略表示",
					"goodsId":'425',
					"goodsName":"新款绿宝瓶新肌水 30ml",
					"goodsLogo":"/static/images/logo.png",
					"number":1,
					"diff":true,
					"diffNum":2,
					"oriPrice":13900,
					"groupDiscount":100,
					"directDiscount":100,
					"groupPrice":13900,
					"directPrice":13900,
				},
				{
					"cartId":858,
					"brandId":237,
					"brandName":"这里文案只显示两行超出省略表示,",
					"goodsId":'426',
					"goodsName":"新款绿宝瓶新肌水 30ml",
					"goodsLogo":"/static/images/logo.png",
					"number":1,
					"diff":true,
					"diffNum":2,
					"oriPrice":13900,
					"groupDiscount":100,
					"directDiscount":100,
					"groupPrice":13900,
					"directPrice":13900,
				}
			],
			isAllChecked: false, //是否全选
			checkedArr: [], //复选框选中的值
			totalPrice: 0.00,
			totalCount: 0,
			status: 'pay', //pay结算，delete删除编辑状态
			startX: 0, //开始坐标
			startY: 0,
			navBarHeight: 0, //导航栏高度
			statusHeight: 0,
			userId:0,
			isFromGroup:false,
			isFromNatural:false,
			orderList:[],
			isempty:false
		}),
		onShow() {
			let list = this.goodsList;
			list.forEach((ele,index)=>{
				ele.isTouchMove = false;
				ele.goods_price = ele.directPrice
			})
			this.goodsList = list;
		},
		methods: {
			getCartList:function(){
			    contentModel.getCartList(this.data.userId).then(res=>{
			      if(res.code == 0){
			        let list = res.data;
			        list.forEach((ele,index)=>{
			          ele.isTouchMove = false;
			          if(this.data.isFromGroup){
			            ele.goods_price = ele.groupPrice
			          }else{
			            ele.goods_price = ele.directPrice
			          }
			        })
			        this.setData({
			          goodsList:list,
			          isempty:false
			        })
			      }
			      if(res.code == 1000){
			        this.setData({
			          goodsList:[],
			          isempty:true
			        })
			      }
			      
			    })
			},
			//删除事件
			del: function (e) {
				let cartIds = e.currentTarget.dataset.carid
				contentModel.delCart(this.data.userId,cartIds).then(res=>{
					if(res.code ==0){
						this.getCartList()
					}
				})
			},
			//选择购物车商品
			handleShopChange(e) {
				// let {
				// 	goodsList,
				// 	isAllChecked
				// } = this.data
				
				
				let goodsList = this.goodsList;
				let isAllChecked = this.isAllChecked;
				
				let values = e.detail.value
				for (let item of goodsList) {
					//有时候id可能是number也有可能是string，这里做统一string处理
					let goodId = String(item.goodsId)
					// 如果要检索的字符串值没有出现，则返回 -1。
					values.indexOf(goodId) >= 0 ? item.checked = true : item.checked = false
				}
				let length = values.length
				// this.data.goodsList.forEach(function (v, i) {
				// 	if (v.isTouchMove) //只操作为true的
				// 		v.isTouchMove = false;
				// })
				
				
				
				this.goodsList.forEach(function (v, i) {
					if (v.isTouchMove) //只操作为true的
						v.isTouchMove = false;
				})
				// 如果选择的数组中有值，并且长度等于列表长度，就是全选
				length > 0 && length === goodsList.length ? isAllChecked = true : isAllChecked = false
				// this.setData({
				// 	isAllChecked,
				// 	goodsList: this.data.goodsList
				// })
				this.isAllChecked = isAllChecked;
				this.goodsList = this.goodsList;
				this.calTotalCountPrice()
			},
			//加减数量
			handleCountChange(e) {
				const { type,id,carid,goodid } = e.currentTarget.dataset
				let  goodsList  = this.goodsList
				
				if (type === 'add') {
					//最大数量显示10个
					if (goodsList[id].number >= 10) return
					goodsList[id].number++
				} else {
					//最小数量限制一个
					if (goodsList[id].number === 1) return
					goodsList[id].number--
				}
				// contentModel.addCart(this.data.userId,carid,goodid,goodsList[id].number).then(res=>{
				// 	if(res.code == 8001){
				// 		wx.showToast({
				// 			title: '抱歉！库存不足~',
				// 			icon:'none'
				// 		})
				// 		this.getCartList()  
				// 	}
				// 	if(res.code == 9002){
				// 		wx.showToast({
				// 			title: '抱歉！没货了~',
				// 			icon:'none'
				// 		})
				// 		this.getCartList()
				// 	}
				// })
				
				this.goodsList = goodsList;
				// this.setData({
				// 	goodsList
				// })
				// this.calTotalCountPrice()
			},
			//全选
			onSelectAll(e) {				
				let goodsList = this.goodsList;
				let isAllChecked = this.isAllChecked;
				
				let values = e.detail.value
				for (let i = 0; i < goodsList.length; i++) {
					goodsList[i].checked = false
					if (values[0] === 'all') {
						isAllChecked = true
						if(goodsList[i].number!=0){
							goodsList[i].checked = true
						}
						
					} else {
						isAllChecked = false
						goodsList[i].checked = false
					}
				}
				this.goodsList.forEach(function (v, i) {
					if (v.isTouchMove) //只操作为true的
						v.isTouchMove = false;
				})
				
				this.isAllChecked = isAllChecked;
				this.goodsList = goodsList;
				
				// this.setData({
				// 	isAllChecked,
				// 	goodsList
				// })
				// this.calTotalCountPrice()
			},
			//购物车状态
			onClickEdit() {
				// let {
				// 	status
				// } = this.data
				let status = this.status;
				if (status === 'pay') {
					this.setData({
						status: 'delete'
					})
					return
				}
				this.status = 'pay'
				
				// this.setData({
				// 	status: 'pay'
				// })
			},
			//计算总数和价格
			calTotalCountPrice() {
				// let {
				// 	goodsList,
				// 	totalCount,
				// 	totalPrice
				// } = this.data
				
				let goodsList = this.goodsList;
				let totalCount = this.totalCount;
				let totalPrice = this.totalPrice;
				
				//每次执行的时候初始化，防止重复计算
				totalCount = 0
				totalPrice = 0
				let orderListTmp = []
				for (let i = 0; i < goodsList.length; i++) {
					//如果都是选中的状态在计算
					if (goodsList[i].checked) {
						totalCount += goodsList[i].number
						totalPrice += goodsList[i].goods_price * goodsList[i].number
						orderListTmp.push(goodsList[i])
						// totalPrice = totalPrice + goodsList[i].goods_price * goodsList[i].number
					}
				}
				// this.setData({
				//   totalCount,
				//   totalPrice: totalPrice.toFixed(2)
				// })
				this.totalCount = totalCount;
				this.totalPrice = totalPrice;
				this.orderList = orderList;
				
				// this.setData({
				// 	totalCount,
				// 	totalPrice: totalPrice,
				// 	orderList:orderListTmp
				// })
			},
			//结算和删除
			onPayOrDelete() {
				// const {
				// 	status
				// } = this.data
				let status = this.status;
				status === 'delete' && this.deleteShopCartList()
				status === 'pay' && this.payShopCartPrice()
			},
			deleteShopCartList() {
				uni.showToast({
					title: 'delete',
				})
			},
			payShopCartPrice() {
				uni.showToast({
					title: 'pay price',
				})
			},
			//手指触摸动作开始 记录起点X坐标
			touchStart: function (e) {
				//开始触摸时 重置所有删除
				this.goodsList.forEach(function (v, i) {
					if (v.isTouchMove) //只操作为true的
						v.isTouchMove = false;
				})
				this.startX = e.changedTouches[0].clientX;
				this.startY = e.changedTouches[0].clientY;
				
				// this.setData({
				// 	startX: e.changedTouches[0].clientX,
				// 	startY: e.changedTouches[0].clientY,
				// 	// goodsList: this.data.goodsList
				// })
				
				
			},
			//滑动事件处理
			touchMove: function (e) {
				var that = this;
				
				var index = e.currentTarget.dataset.index; //当前索引
		
				var	startX = that.startX; //开始X坐标
		
				var	startY = that.startY; //开始Y坐标
		
				var	touchMoveX = e.changedTouches[0].clientX; //滑动变化坐标
		
				var	touchMoveY = e.changedTouches[0].clientY; //滑动变化坐标
		
				//获取滑动角度
				var	angle = that.angle({
						X: startX,
						Y: startY
					}, {
						X: touchMoveX,
						Y: touchMoveY
					});
				
				
				let list = this.goodsList;
				list.forEach(function (v, i) {
					v.isTouchMove = false
					//滑动超过30度角 return
					if (Math.abs(angle) > 30) return;
					if (i == index) {
						if (touchMoveX > startX) //右滑
							v.isTouchMove = false
						else //左滑
							v.isTouchMove = true
					}
				})
				//更新数据
				
				that.goodsList = list;
				this.$forceUpdate()
				
				
				
			},
			/**
			* 计算滑动角度
			* @param {Object} start 起点坐标
			* @param {Object} end 终点坐标
			*/
			angle: function (start, end) {
				var _X = end.X - start.X,
					_Y = end.Y - start.Y
				//返回角度 /Math.atan()返回数字的反正切值
				return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shopcart-title{
		padding-top: 40rpx;
		.shopcart-title-text{
			font-size: 40rpx;
			font-weight: 600;
			color: #333333;
			line-height: 56rpx;
			margin-left: 32rpx;
		}
	}
	
	.shopcart-main-container {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		padding-bottom: 188rpx;
	}
	
	.gouwudai {
		display: flex;
		width: 36rpx;
		height: 40rpx;
		align-items: center;
		justify-content: center;
		font-size: 40rpx;
		color: #333333;
		font-weight: 600;
	}
	
	.shop-item {
		width:702rpx;
		height:340rpx;
		// padding-bottom: 24rpx;
		overflow: hidden;
		margin-bottom: 40rpx;
		display: flex;
		// align-items: center;
		border: 1rpx solid #f1f1f1;
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(216, 216, 216, 0.8);
		border-radius: 16rpx;
		position: relative;
	}
	
	.touch-wrapper {
		width: 100%;
		margin-right: 0;
		-webkit-transition: all 0.4s;
		transition: all 0.4s;
		-webkit-transform: translateX(90rpx);
		transform: translateX(90rpx);
		margin-left: -90rpx;
	}
	
	.shop-item:last-child {
		border-bottom: 0;
		margin-bottom: 100rpx;
	}
	
	.good-icon-box{
		width: 164rpx;
		height: 164rpx;
		border-radius: 12rpx;
		// border: 2rpx solid #D7D8DC;
		margin: 0 24rpx 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.good-icon {
		width: 164rpx;
		height:164rpx;
		border-radius: 12rpx;
	}
	
	.good-info {
		display: flex;
		flex-direction: column;
		color: #3D444D;
		width: 340rpx;
	}
	
	.name {
		width: 406rpx;
		height: 80rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	
	.describe {
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 40rpx;
		height: 80rpx;
	}
	
	.vip-price-text-icon{
		width: 66rpx;
		height: 24rpx;
		background: linear-gradient(90deg, #FF3711 0%, #FF820C 100%);
		border-radius: 4rpx;
		font-size: 16rpx;
		color:#FFFFFF;
		font-style: italic;
		display: flex;
		align-items: center;
		justify-content: center;
		letter-spacing: 2rpx;
		margin:8rpx 0;
	}
	.diff-market-price-tips{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FF4924;
		line-height: 34rpx;
		margin-bottom: 20rpx;
	}
	.good-price{
		display: flex;
	}
	.good-price-vip{
		display: flex;
		>view:nth-child(1){
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FF4924;
			line-height: 34rpx;
			margin-top: 16rpx;
		}
		>view:nth-child(2){
			font-size: 44rpx;
			font-family: DINAlternate-Bold, DINAlternate;
			font-weight: bold;
			color: #FF4924;
			line-height: 52rpx;
			margin-left: 8rpx;
		}
	}
	.good-price-market{
		display: flex;
		height: 36rpx;
		background: rgba(255, 73, 36, 0.07);
		padding:0 16rpx;
		border-radius: 19rpx;
		margin: 12rpx 0 0 16rpx;
		>view:nth-child(1){
			font-size: 20rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 20rpx;
			margin-top: 8rpx;
		}
		>view:nth-child(2){
			font-size: 20rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 28rpx;
			margin: 6rpx 4rpx 0 8rpx;
		}
		>view:nth-child(3){
			font-size: 28rpx;
			font-family: DINAlternate-Bold, DINAlternate;
			font-weight: bold;
			color: #333333;
			line-height: 32rpx;
			margin-top: 2rpx;
		}
		
		
	}
	
	.good-price-num {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 380rpx;
		margin-top: 4rpx;
	}
	
	.good-price-num-text {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	
	.amount {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		margin-top: 20rpx;
	}
	
	.amount view {
		width: 50rpx;
		width: 32rpx;
		line-height: 50rpx;
		line-height: 32rpx;
		text-align: center;
		// background-color: #f1f1f1;
		border: 2rpx solid #CCCCCC;
		border-radius: 11rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	/* 底部 */
	.bottom-container {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 150rpx;
		background-color: #fff;
		/* background: #F5F5F5; */
		box-shadow: 12rpx 0 15rpx rgba(0, 0, 0, 0.16);
		padding-bottom: 40rpx;
	}
	
	.bottom-wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100%;
	}
	
	.checkall {
		display: flex;
		align-items: center;
		color: #333;
		font-size: 26rpx;
		margin-left: 25rpx;
	}
	
	.settlement {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 60rpx;
		color: #fff;
		margin-right: 30rpx;
	}
	
	.goPay {
		width: 450rpx;
		height: 92rpx;
		background: #CBA6C3;
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(216, 216, 216, 0.8);
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 60rpx;
	}
	
	.payIcon {
		display: flex;
		width: 80rpx;
		height: 37rpx;
		align-items: center;
		justify-content: center;
		font-size: 38rpx;
		color: #FFFFFF;
		font-weight: 600;
	}
	
	.total-text {
		color: #ef5656;
		font-size: 33rpx;
		font-weight: bold;
		margin-right: 15rpx;
	}
	
	.total-text::before {
		content: '合计：';
		color: #3D444D;
		font-weight: 400;
	}
	
	.pay {
		font-size: 26rpx;
		padding: 10rpx 20rpx;
		border-radius: 50rpx;
		background-color: red;
	}
	
	
	.content-box {
		margin-right: 0;
		-webkit-transition: all 0.4s;
		transition: all 0.4s;
		-webkit-transform: translateX(85px);
		transform: translateX(85px);
		// margin-left: -90px;
		margin:24rpx 0 0 -90px;
	}
	
	
	/* 删除按钮样式 */
	.del {
		background-color: orangered;
		width: 100px;
		height: 100%;
		border-radius: 0 30rpx 30rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #fff;
		-webkit-transform: translateX(120px);
		transform: translateX(120px);
		-webkit-transition: all 0.4s;
		transition: all 0.4s;
		// margin-left: 20rpx; 
	}
	
	.touch-move-active .content-box,
	.touch-move-active .del {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		border-radius: 0 30rpx 30rpx 0;
	}
	
	/* 修改checkbox样式 未选中的 背景样式 */
	.checkbox {
		margin:88rpx 0rpx 0 24rpx;
	}
	
	checkbox .uni-checkbox-input {
		border-radius: 25%;
		width: 46rpx;
		height: 46rpx;
		transform: scale(0.7);
	}
	
	/* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
	checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		/* border: 1rpx solid #333333; */
		background: #333333;
	}
	
	/* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */
	checkbox .uni-checkbox-input.uni-checkbox-input-checked::before {
		border-radius: 50%;
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 30rpx;
		color: #fff;
		background: transparent;
		transform: translate(-50%, -50%) scale(1);
		-webkit-transform: translate(-50%, -50%) scale(1);
	}
	

	
	
	
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}
	
	.sell_out{
		width:670rpx;
		height: 100%;
		position: absolute;
		left:0;
		top:0;
		background: rgba(248, 250, 255, 0.7);
		display: flex;
		align-items: center;
	}
	
	.sell_out_text{
		font-size: 40rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 56rpx;
		letter-spacing: 2rpx;
		margin-left: 130rpx;
	}
	.touch-move-active-pop{
		left:-90px;
	}
	
	.touch-move-active-pop .sell_out_text{
		margin-left: 300rpx;
	}
	
	.emptycart{
		display: block;
		width: 100rpx;
		height: 100rpx;
		margin: 150rpx 0 10rpx 0; 
	}
	
	.emptycart_box{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.cartext{
		font-size: 28rpx;
		color:#939597;
	}

</style>
